import  React from 'react'


import   CurrentCity from './CurrentCity/CurrentCity'

import  HotCity from './HotCity/HotCity'

import  Header from '../../components/Header/Header'


import  {connect}  from 'react-redux'

 class  City  extends   React.Component {

    changeCityHandler=(city)=>{
    console.log(city)
    this.props.updateCity(city,()=>{
        alert('更新数据完成')
    })
    window.localStorage.setItem('cityName',city)
    this.props.history.push('/')

    }
    render(){
        return(
            <div>
                
                 <Header/>
                <CurrentCity  city={this.props.city}/>
                <HotCity  changeCity={this.changeCityHandler}/>

            </div>
        )
    }
}


function  mapStateToProps(state,props){
    console.log(state)
    
    return {
        ...state
    }
}


function  mapDispatchToProps(dispatch) {
    return {
        updateCity:(cityName,callback)=> dispatch({
            type:'update_city',
            city:cityName
        },
        callback &&callback()
        )


       
    }
}


export default  connect(mapStateToProps,mapDispatchToProps)(City)